<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<!-- #ifdef H5-->
		<Top />
		<!-- #endif -->
		<view class="main-section top">
			<template>
				<VideoPlayer ref="videoPlayer" :data="data" />
			</template>
			
			<view class="base-info">
				<view class="title">
					{{data.title}}
				</view>
				<view class="description">
					{{data.description}}
				</view>
			</view>
			
			<view class="detail">
				<view class="tab">
					<view class="tab-item tab-list active only">
						历史直播回看
					</view>
				</view>
				<!--回看目录-->
				<view class="list">
					<!--列表-->
					<view class="history" v-for="(item,index) in list" :key="index" :class="index==playOnIndex?'active':''">
						<view class="history-item" @click="playIndex(index)">
							<view class="time">{{item.start_time_str}}</view>
							<view class="title text-ellipsis">
								 直播回看
							</view>
							<view class="playing">
								<text class="iconfont">&#xe61c;</text>
							</view>
						</view>
					</view>
				</view>
				<view class="example-body">
					<uni-load-more iconType="circle" :status="listLoadStatus" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	//全屏加载中
	import FullscreenLoading from '../../../components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	
	import VideoPlayer from './_videoPlayer.vue'
	
	import CopyRight from '../common/copyRight.vue' //自定义版权
	import Top from '../common/top.vue'
	
	export default {
		components: {
			FullscreenLoading,
			VideoPlayer,
			CopyRight,
			Top,
		},
		data() {
			return {
				loading: true, //加载中
				userInfo: {},
				urlParams: {},
				data: {}, // 直播间数据
				page: 1, // 直播回看初始页码
				list: [], // 直播回看列表数据
				listLoadStatus: 'more', // more 加载前 loading 加载中 noMore没有更多
				playOnIndex: 0
			}
		},
		async onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			await this.$onLaunched;
			let that = this
			this.urlParams = option
			Promise.all([this.getData(),this.getHistoryList()]).then(res => {
				that.setSrc(that.list[0].video_url)
			}).then(() => {
				//加载完成
				this.loading = false
			})
			
		},
		created() {
			//获取已登录用户数据
			this.getUserInfo()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			
			/**
			 * 获取直播间详情数据
			 */
			getData: function(){
				let that = this
				let params = this.urlParams
				let data = {}
					data.action = 'detail'
					data.id = params.roomid
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/livecourse'
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/live'
					data.m = 'muu_classroom_plugin_livecourse'
					//#endif
				//获取首页数据
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.data = res.data.data
								uni.setNavigationBarTitle({
								　　title:res.data.data.title
								})
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 获取回看分页列表
			 */
			getHistoryList: function() {
				let that = this
				this.listLoadStatus = 'loading'
				let data = this.urlParams
					data.page = this.page
					data.rows = 20
				//获取列表数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/livecourse'
					data.action = 'history'
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/history'
					data.action = 'lists'
					data.m = 'muu_classroom_plugin_livecourse'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							//console.log(res.data.code);
							if (res.data.code == 200) {
								let list = res.data.data.data
									if(list.length!==undefined && list.length > 0){
										that.listLoadStatus = 'more'
										that.list = that.list.concat(list);
										that.page = that.page + 1
										if(list.length < 20){
											that.listLoadStatus = 'noMore'
										}
									}else{
										that.listLoadStatus = 'noMore'
									}
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 切换播放
			 * @param {Object} index
			 */
			playIndex(index) {
				this.playOnIndex = index
				let src = this.list[index].video_url
				this.setSrc(src)
			},
			
			/**
			 * 设置默认路径
			 */
			setSrc(src) {
				this.$refs.videoPlayer.setSrc(src)
			},
			
			/**
			 * 设置播放器封面
			 * @param {Object} poster
			 */
			setPoster(poster) {
				this.$refs.videoPlayer.setPoster(poster)
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				this.userInfo = userInfo
				console.log('userInfo',this.userInfo)
			},
		},
		
		onReachBottom() {
			console.log('页面滚动到底部')
			this.getHistoryList()
		},
		
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {

		},
		/**
		 * 监听用户点击右上角转发到朋友圈
		 */
		onShareTimeline() {
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	.video {
		video {
			width: 100%;
		}
	}
	
	.base-info {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #000;
		}
		.description {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.detail {
		.tab {
			display: flex;
			padding: 10rpx 0;
			padding: 0 20rpx 0 20rpx;
			background-color: #fff;
			.tab-item {
				flex: 1;
				text-align: center;
				line-height: 72rpx;
				padding-bottom: 8rpx;
			}
			.tab-item.only {
				flex: none;
				text-align: left;
			}
			.active {
				position: relative;
				&:before {
					position: absolute;
					right: 30%;
					left: 30%;
					bottom: 0;
					height: 8rpx;
					content: '';
					-webkit-transform: scaleY(.5);
					transform: scaleY(.5);
					background-color: #03b8cf;
				}
			}
		}
		
		//目录
		.list {
			background-color: #fff;
			padding: 20rpx;
			.history {
				.history-item {
					display: flex;
					font-size: 24rpx;
					color: #666;
					padding-left: 30rpx;
					line-height: 66rpx;
					&:active {
						background-color: #f8f8f8;
					}
					.time {
						width: 326rpx;
						font-size: 32rpx;
						font-weight: 600;
					}
					.title {
						flex: 1;
					}
					.playing {
						font-size: 28rpx;
						width: 40rpx;
						padding-left: 10rpx;
						display: none;
					}
				}
			}
			.history.active {
				.history-item {
					color: #f90;
					.playing {
						display: block;
					}
				}
			}
			
		}
	}
	
	@keyframes playing {
		
			0%{-webkit-transform: rotateY(180deg);} 
			100%{-webkit-transform: rotateY(0deg);} 
		
	}
	
</style>
